<template>
    <NavBar></NavBar>
    <ContentField>
        <h2 style="text-align:center;">答题</h2>
        <h2><button style="width:15%;" class="btn btn-sm btn-info" @click="returnPre">返回</button></h2>

        <form>
        <!-- <form @submit.prevent="answerPro"> -->
        <div class="mb-3">
            <label for="id" class="form-label">&nbsp;&nbsp;题号(id): </label>
            <span type="text" class="form-control" id="id"> {{ id }} </span>
        </div>
        <div class="mb-3">
            <label for="content" class="form-label">&nbsp;&nbsp;题目描述(content): </label>
            <span type="text"  class="form-control" id="content">{{ content }}</span>
        </div>
        <div class="mb-3">
            <label for="correctSQL" class="form-label">&nbsp;&nbsp;你的答案(answer): </label>
            <input type="text" v-model="answer" class="form-control" id="answer" required>
        </div>
        <div align="center">
            <span style="color:red;">{{ error_message }}</span>
            <button type="submit" class="btn btn-primary" style="width:20%;">提交</button>
        </div>
    </form>

    </ContentField>
</template>


<script>

//  前端进行测评：
//      学生用户输入答案之后,自动向后端发送ajax请求, 
//          如果正确, 则跳转到题集页面;
//          如果错误, 则返回答案错误提示
//

import NavBar from "@/components/student/NavBar/NavBar.vue";
import ContentField from '@/components/commons/ContentField.vue';
import {ref} from 'vue';
import $ from 'jquery';
import {useStore} from 'vuex';
import { useRoute } from 'vue-router';
import router from '@/router/index';

export default{
    name: 'AnswerProView',
    components: {
        NavBar,
        ContentField,
    },
    setup(){

        const store = useStore();
        const route = useRoute();
        let content = ref('');
        let proType = ref('');
        let answer = ref('');
        let correct = false;

        let id = route.params.id;
        

        const getProInfo = (id) => {
            $.ajax({
                url: "http://localhost:8090/sls/student/getProById/" + id,
                type: "get",
                headers: {
                Authorization: "Bearer " +store.state.user.token,
                },
                success(resp){
                  console.log(resp);
                  content.value = resp.content;
                  proType.value = resp.proType;
                },
                error(resp){
                    console.log(resp);
                 }
           });
        }
        getProInfo(id);

        const returnPre = () => {
            console.log("proType.value: ");
            console.log(proType.value);
            if(proType.value == 1){
                router.push({name:'S_querySet', params: {proType: proType.value}});
            }
            if(proType.value == 2){
                router.push({name:'S_addSet', params: {proType: proType.value}});
            }
            if(proType.value == 3){
                router.push({name:'S_updateSet', params: {proType: proType.value}});
            }
            if(proType.value == 4){
                router.push({name:'S_deleteSet', params: {proType: proType.value}});
            }
        }

        // const answerPro = () => {  //进行测评


        // }

        return{
            id,
            content,
            proType,
            answer,
            correct,

            returnPre,
            getProInfo,
            //answerPro,
        }

    }
}

</script>